<template>
  <el-card>
    <div class="mb-20">
      <el-input placeholder="角色名称" style="width: 500px; margin-right: 10px;" size="small" v-model="roleName" ></el-input>
      <el-button type="primary" size="small" icon="el-icon-search" @click="searchHandler" >查询</el-button>
      <el-button size="small" @click="reset" >清空</el-button>
    </div>
    <div class="mb-20">
      <el-button type="primary" size="small" @click="addHandler" >添加</el-button>
      <el-button type="danger"  size="small" @click="batchRemove" >批量删除</el-button>
    </div>
    <el-table class="mb-20" 
      :data="roleList" 
      style="width: 51%" 
      @selection-change="handleSelectionChange" 
      border 
      empty-text="暂无数据"
      :stripe="true"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
      <el-table-column label="角色名称" align="center" width="200">
        <template slot-scope="{ row }">
          <div v-if="row.inputVisible">
            <el-input v-model="roleForm.roleName" size="mini" ></el-input>
            <el-button size="mini" type="warning" @click="cancel(row)" >取消</el-button>
          </div>
          <div v-else >{{ row.roleName }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button type="info"    size="mini" icon="el-icon-info" @click="toAssign(row)" ></el-button>
          <el-button type="primary" size="mini" icon="el-icon-check" @click="update(row)" ></el-button>
          <el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="edit(row)" ></el-button>
          <el-popconfirm :title="`确定要删除 ${ row.roleName } 吗`" class="ml-10" @onConfirm="handleDeleteRow(row)" >
            <el-button type="danger"  size="mini" icon="el-icon-delete" slot="reference"></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="width: 52%;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="limit"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
import roleApi from '@/api/role'
import { Message } from 'element-ui';
import Lodash from 'lodash'
export default {
  name: 'Role',
  data() {
    return {
      page: 1,
      limit: 5,
      total: 0,
      roleName: '',
      searchName: '',
      roleList: [],
      deleteSelection: [],
      roleForm: {
        id: "",
        gmtCreate: "",
        gmtModified: "",
        deleted: false,
        roleName: "",
        remark: null,
        inputVisible: false
      }
    }
  },
  methods: {
    async getRoleList() {
      try {
        let result = await roleApi.role(this.page, this.limit, this.searchName)
        this.total = result.total
        this.roleList = result.items.map(item => {
          return {
            ...item,
            inputVisible: false
          }
        })
      } catch (error) {
        console.error(error)
      }
    },
    handleSelectionChange(val) {
      this.deleteSelection = val.map(item => item.id);
    },
    handleSizeChange(val) {
      this.limit = val
      this.getRoleList();
    },
    handleCurrentChange(val) {
      this.page = val
      this.getRoleList();
    },
    async searchHandler() {
      this.searchName = this.roleName
      this.getRoleList();
    },
    reset() {
      this.searchName = ''
      this.roleName = ''
      this.getRoleList()
    },
    async addHandler() {
      await this.$prompt('请输入新名称', '添加角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        callback: async (action, instance) => {
          if(action == 'cancel' || action == 'close' ) {
            Message.warning('取消添加')
          } else {
            try {
              await roleApi.save({ roleName: instance.inputValue })
              Message.success('添加成功')
              this.getRoleList()
            } catch (error) {
              console.error(error)
            }
          }
        }
      })
    },
    async batchRemove() {
      await this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        async callback(action) {
          if(action == 'cancel' || action == 'close') {
            Message.info('已取消删除')
          } else {
            try {
              await roleApi.batchRemove(this.deleteSelection)
              Message.success('删除成功')
            } catch (error) {
              Message.success('删除失败')
              console.error(error)
            }
          }
        }
      })
    },
    toAssign(row) {
      this.$router.push({
        path: '/permission/role/auth',
        query: {
          id: row.id,
          roleName: row.roleName
        }
      })
    },
    async update(row) {
      try {
        await roleApi.update(row)
        row.inputVisible = false
        Message.success('更新角色成功')
      } catch (error) {
        console.error(error)
      }
    },
    edit(row) {
      this.roleForm = Lodash.cloneDeep(row)
      row.inputVisible = true
    },
    cancel(row) {
      row.inputVisible = false
      Message.warning('取消修改')
    },
    async handleDeleteRow(row) {
      try {
        await roleApi.remove(row.id)
        this.getRoleList();
      } catch (error) {
        console.error(error)
      }
    }
  },
  mounted() {
    this.getRoleList();
  }
};
</script>

<style>
</style>